<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>pinusMusic</title>
  <link rel="icon" href="favicons/1.png">
  <script src="../js/jquery-1.11.0.min.js"></script>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/index.css">
  <link href="../css/bootstrap.min.css" rel="stylesheet">
  <link href="../css/materialdesignicons.min.css" rel="stylesheet">
  <link href="../css/style.min.css" rel="stylesheet">
  <script src="js/include.js"></script>
  <script>
    $(function (){
      $.post(
              "/music/music/setsession",{}
      )
    })
  </script>
  <style>
    .audio-wrapper {
      border-radius: 35px;
      background-color: #fcfcfc;
      margin: 10px auto;
      /*max-width: 670px;*/
      width: 90%;
      height: 70px;
      border: 1px solid #e0e0e0;
      position: fixed ;
      left: 5%;
      top: 85%;
      z-index: 100;
    }

    .audio-left {
      float: left;
      text-align: center;
      width: 15%;
      height: 100%;
    }

    .audio-left img {
      width: 40px;
      position: relative;
      top: 15px;
      margin: 0;
      display: initial; /* 解除与app的样式冲突 */
      cursor: pointer;
    }

    .audio-right {
      margin-right: 2%;
      float: right;
      width: 80%;
      height: 100%;
    }

    .audio-right p {
      font-size: 15px;
      height: 35%;
      margin: 8px 0;
      /* 歌曲名称只显示在一行，超出部分显示为省略号
         */
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      max-width: 243px;
      /*
         要适配小屏幕手机，所以最大宽度先设小一点，后面js根据屏幕大小重新设置 */
    }

    .progress-bar-bg {
      background-color: #d9d9d9;
      position: relative;
      height: 4px;
      cursor: pointer;
    }

    .progress-bar {
      background-color: #33cabb;
      width: 0;
      height: 4px;
    }

    .progress-bar-bg span {
      content: " ";
      width: 10px;
      height: 10px;
      border-radius: 50%;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      background-color: #33cabb;
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -5px;
      margin-left: -5px;
      cursor: pointer;
    }

    .audio-time {
      overflow: hidden;
      margin-top: -1px;
    }

    .audio-length-total {
      float: right;
      font-size: 12px;
    }

    .audio-length-current {
      float: left;
      font-size: 12px;
    }
  </style>

</head>
<body>

  <div id="header">

  </div>
  <div id="audio">

  </div>

  <!-- 热门歌单 -->
  <div class="main" id="hotSong">
    <div class="main-inner">
      <div class="main-title">
        <h2 class="title"><i></i></h2>
        <span class="line line-left"></span>
        <span class="line line-right"></span>
      </div>
      <div class="main-slider">
        <ul class="slider-wrapper" id="musicList"></ul>
<!--        <div class="slider-btns" id="page">-->
<!--          <span class="cur"><i></i></span>-->
<!--          <span><i></i></span>-->
<!--          <span><i></i></span>-->
<!--        </div>-->
      </div>
    </div>
    <div class="main-operate" id="switch">
      <a href="javascript:;" class="slider-prev" id="prev"><i class="icon-sprite"></i></a>
      <a href="javascript:;" class="slider-next" id="next"><i class="icon-sprite"></i></a>
    </div>
  </div>


  <!-- footer -->
  <div id="footer"></div>
  <!-- 播放器 -->

  <!-- 分享到 -->
  <ul class="slider-share">
    <li><a href="#">
      <i class="icon-sprite icon-add"></i>
      添加到
      <i class="icon-sprite icon-arrow"></i>
    </a></li>
    <li><a href="#">
      <i class="icon-sprite icon-share"></i>
      分享
      <i class="icon-sprite icon-arrow"></i>
    </a></li>
    <li><a href="#">
      <i class="icon-sprite icon-download"></i>
      下载
    </a></li>
  </ul>

  <script src="../js/jquery.min.js"></script>
  <script src="js/script.js"></script>
  <script src="js/index.js"></script>
  <script type="text/javascript" src="../js/bootstrap.min.js"></script>
  <script type="text/javascript" src="../js/main.min.js"></script>
<!--  <script>document.write('<script src="//' + (location.host || 'localhost').split(':')[0] + ':35929/livereload.js?snipver=1"></' + 'script>')</script>-->
<!--  <script src="//127.0.0.1:35929/livereload.js?snipver=1"></script>-->
<!--  <script>document.addEventListener('LiveReloadDisconnect', function () {-->
<!--    setTimeout(function () {-->
<!--      window.location.reload();-->
<!--    }, 500);-->
<!--  })-->
<!--  </script>-->
</body>
</html>